<!DOCTYPE html>

<html class="no-js">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
    <!-- 导入表格需要的包 -->

    <script src="https://cdn.staticfile.org/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
    <script src="https://cdn.staticfile.org/xlsx/0.14.1/xlsx.full.min.js"></script>

    <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css"
    />
    <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
    <script src="https://cdn.staticfile.org/Sortable/1.10.0-rc2/Sortable.min.js"></script>
    <link rel="stylesheet" href="../../../lib/index.css" />
    <script src="../../../lib/avue.js"></script>
  </head>

  <body>
    <div id="app">
      <avue-crud ref="crud" :option="option" :data="data"></avue-crud>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
            form: {},
          data: [
            {
              text1: "内容1-1",
              text2: "内容1-2"
            },
            {
              text1: "内容2-1",
              text2: "内容2-2"
            },
            {
              text1: "内容3-1",
              text2: "内容3-2"
            },
            {
              text1: "内容4-1",
              text2: "内容4-2"
            },
            {
              text1: "内容5-1",
              text2: "内容5-2"
            }
          ],
          option: {
            name:"column-sortable",
            isSetLocalStorageByList:false,
            sortable: true,
            addBtn: true,
            menu: false,
            filterBtn: true,
            align: "center",
            column: [
              {
                label: "列内容1",
                prop: "text1",
                search:true,
                // order:2,
                // searchOrder:1,
                // formOrder:3,
              },
              {
                label: "列内容2",
                prop: "text2",
                search:true,
                order:1,
                searchOrder:1,
                formOrder:1,
              },
              {
                label: "列内容3",
                prop: "text3",
                search:true,
                // order:3,
                // searchOrder:3,
                // formOrder:1,
              }
            ]
          }
        };
      },
      mounted() {
        this.$refs.crud.$refs.dialogColumn.columnBox = true;
      },
      created() {
      }
    });
  </script>
</html>
